﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<base href="<%= basePath%>"/>
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>


<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript">
	$(function(){
		//点击创建交易按钮
		$("#isCreateTransaction").click(function(){
			if(this.checked){
				$("#create-transaction2").show(200);
			}else{
				$("#create-transaction2").hide(200);
			}
		});
		//点击转换按钮
		$("#convertBtn").click(function (){
			var clueId='${clue.id}'
			var isCreateTransfer= $("#isCreateTransaction").prop("checked")
			var money=$.trim($("#amountOfMoney").val())
			var name=$.trim($("#tradeName").val())
			var expectDate=$("#expectedClosingDate").val()
			var stage=$("#stage").val()
			var activityId=$("#activity").attr("activityId")
			if(isCreateTransfer=="true"){
				if(money==""){
					alert("请输入交易金额")
					return
				}
				if(name==""){
					alert("请输入交易名称")
					return
				}
				if(expectDate==""){
					alert("请选择交易的预计日期")
					return
				}
				if(stage==""){
					alert("请选择交易所处阶段")
					return
				}
				if(activityId=""){
					alert("请选择市场活动来源")
					return
				}
			}
			$.ajax({
				url:"workbench/clue/convert.do",
				type:"post",
				data:{
					clueId:clueId,
					isCreateTransfer: isCreateTransfer,
					money:money,
					name:name,
					expectDate:expectDate,
					stage:stage,
					activityId:activityId
				},
				dataType:"json",
				success:function (data){
					if(data.state=="0"){
						alert(data.msg)
					}else{
						alert(data.msg)
						window.location.href="workbench/clue/toIndex.do"
					}
				}
			})
		})
		//市场活动搜索框键盘弹起
		$("#activityLikeName").keyup(function (){
			var name=$.trim(this.value)
			$.ajax({
				url:"workbench/activity/queryActivityByLikeAndClueId.do",
				type:"post",
				data:{
					name:name,
					clueId: '${clue.id}'
				},
				datatype:"json",
				success:function (data){
					var html=""
					$.each(data,function (i,activity){
						html+="<tr>"
						html+="		<td><input type=\"radio\" name=\"activity\" activityName=\""+activity.name+"\" value=\""+activity.id+"\"/></td>"
						html+="		<td>"+activity.name+"</td>"
						html+="		<td>"+activity.startDate+"</td>"
						html+="		<td>"+activity.endDate+"</td>"
						html+="		<td>"+activity.owner+"</td>"
						html+="	</tr>"
					})
					$("#activityBody").html(html)
				}
			})
		})
		//选择市场活动单选框
		$("#activityBody").on("click","input[name='activity']",function (){
			$("#searchActivityModal").modal("hide")
			$("#activity").val($(this).attr("activityName"))
			$("#activity").attr("activityId",this.value)
		})
		//点击搜索市场活动图标
		$("#searchActivityBtn").click(function (){
			$("#searchActivityModal").modal("show")
		})
	});
</script>

</head>
<body>
	
	<!-- 搜索市场活动的模态窗口 -->
	<div class="modal fade" id="searchActivityModal" role="dialog" >
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">搜索市场活动</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input type="text" id="activityLikeName" class="form-control" style="width: 300px;" placeholder="请输入市场活动名称，支持模糊查询">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>开始日期</td>
								<td>结束日期</td>
								<td>所有者</td>
								<td></td>
							</tr>
						</thead>
						<tbody id="activityBody">
							<c:forEach items="${activityList}" var="activity">
								<tr>
									<td><input type="radio" name="activity" value="${activity.id}" activityName="${activity.name}"/></td>
									<td>${activity.name}</td>
									<td>${activity.startDate}</td>
									<td>${activity.endDate}</td>
									<td>${activity.owner}</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<div id="title" class="page-header" style="position: relative; left: 20px;">
		<h4>转换线索 <small>${clue.fullname}${clue.appellation}-${clue.company}</small></h4>
	</div>
	<div id="create-customer" style="position: relative; left: 40px; height: 35px;">
		新建客户：${clue.company}
	</div>
	<div id="create-contact" style="position: relative; left: 40px; height: 35px;">
		新建联系人：${clue.fullname}${clue.appellation}
	</div>
	<div id="create-transaction1" style="position: relative; left: 40px; height: 35px; top: 25px;">
		<input type="checkbox" id="isCreateTransaction" />
		为客户创建交易
	</div>
	<div id="create-transaction2" style="position: relative; left: 40px; top: 20px; width: 80%; background-color: #F7F7F7; display: none;" >
		<form>
		  <div class="form-group" style="width: 400px; position: relative; left: 20px;">
		    <label for="amountOfMoney">金额</label>
		    <input type="text" class="form-control" id="amountOfMoney">
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="tradeName">交易名称</label>
		    <input type="text" class="form-control" id="tradeName" value="">
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="expectedClosingDate">预计成交日期</label>
		    <input type="date" class="form-control" id="expectedClosingDate">
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="stage">阶段</label>
		    <select id="stage"  class="form-control">
		    	<option></option>
		    	<c:forEach items="${stages}" var="stage">
					<option value="${stage.value}">${stage.value}</option>
				</c:forEach>
		    </select>
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="activity">市场活动源&nbsp;&nbsp;<a href="javascript:void(0);" style="text-decoration: none;"><span class="glyphicon glyphicon-search" id="searchActivityBtn"></span></a></label>
		    <input type="text" class="form-control" id="activity" placeholder="点击上面搜索"  activityId="" readonly>
		  </div>
		</form>
		
	</div>
	
	<div id="owner" style="position: relative; left: 40px; height: 35px; top: 50px;">
		记录的所有者：<br>
		<b>${clue.owner}</b>
	</div>
	<div id="operation" style="position: relative; left: 40px; height: 35px; top: 100px;">
		<input class="btn btn-primary" id="convertBtn" type="button" value="转换">
		&nbsp;&nbsp;&nbsp;&nbsp;
		<input class="btn btn-default" type="button" value="取消">
	</div>
</body>
</html>